<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>ArduPilot Custom Firmware Builder</title>
    <meta name="description"
        content="ArduPilot Custom Firmware Builder. It allows to build custom ArduPilot firmware by selecting the wanted features.">
    <meta name="author" content="ArduPilot Team">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
    <meta property="og:site_name" content="ArduPilot" />
    <meta property="og:site" content="" />
    <meta property="og:title" content="ArduPilot Custom Firmware Builder" />
    <meta property="og:description"
        content="ArduPilot Custom Firmware Builder. It allows to build custom ArduPilot firmware by selecting the wanted features." />
    <!-- description shown in the actual shared post -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://custom.ardupilot.org/">
    <meta property="og:image" content="https://ardupilot.org/application/files/6315/7552/1962/ArduPilot-Motto.png">

    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/main.css') }}">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head>

<body class="bg-light" onload="javascript: init()">
    <div class="d-flex flex-column justify-content-between" style="height: 100vh;">
        <div>
            <nav class="navbar bg-dark">
                <div class="container-fluid">
                    <div>
                        <a class="navbar-brand" href="/">
                            <img src="{{ url_for('static', filename='images/ardupilot_logo.png')}}" alt="ArduPilot" height="24"
                                class="d-inline-block align-text-top">
                            <span class="ms-2 text-white" style="font-size: 25px;">Custom Firmware Builder</span>
                        </a>
                    </div>
                    <div>
                        <a href="https://github.com/ArduPilot/CustomBuild/issues/new" class="btn btn-outline-light me-1"><i
                                class="bi bi-github me-2"></i>Report an issue</a>
                        <a href="/builds" class="btn btn-outline-light me-1"><i class="bi bi-folder2-open me-2"></i>Go to
                            builds directory</a>
                        <a href="/add_build" class="btn btn-success"><i class="bi bi-plus-square me-2"></i>Add a build</a>
                    </div>
                </div>
            </nav>
            <div class="container-fluid px-3 py-3" id="build_table_container">
                <div class="container-fluid d-flex align-items-center justify-content-center" style="height: 100vh;">
                    <div class="container-fluid w-25 d-flex align-content-between">
                        <strong>Fetching builds...</strong>
                        <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid d-flex text-bg-dark p-2 justify-content-between">
            <div>
                <span class="mx-2">Credits: 
                    <a href="https://github.com/ArduPilot/CustomBuild/graphs/contributors" style="text-decoration: underline; color: white;">See Contributors</a>
                </span>|
                <span class="mx-2">Source:
                    <a href="https://github.com/Ardupilot/CustomBuild" style="text-decoration: underline; color: white;">Ardupilot/CustomBuild</a>
                </span>
            </div>
            <span>To try out the newest features of the app, please visit our beta server 
                <a href="https://custom-beta.ardupilot.org" style="text-decoration: underline; color: white;">custom-beta.ardupilot.org</a>
            </span>
        </div>
    </div>

    <!-- Log Modal -->
    <div class="modal fade" id="logModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="logModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logModalLabel">Build log</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <textarea class="form-control" id="logTextArea" rows="30" col="100" readonly
                        style="font-family: Consolas, monaco, monospace; font-size: smaller;"></textarea>
                </div>
                <div class="modal-footer">
                    <div class="container-fluid d-flex justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="autoScrollSwitch" checked>
                                <label class="form-check-label" for="autoScrollSwitch">Auto-Scroll</label>
                            </div>
                        </div>
                        <div class="p-2">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Modal -->
    <div class="modal fade" id="featureModal" tabindex="-1" aria-labelledby="featureModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="featureModalLabel">Included features</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4" id="featureModalBody"></div>
                <div class="modal-footer">
                    <div class="container-fluid d-flex justify-content-end">
                        <div class="p-2">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/index.js')}}"></script>

    {% if token != None %}
    <script>
        document.addEventListener("load", launchLogModal('{{token}}'));
    </script>
    {% endif %}

</body>

</html>